import React, { useMemo, useState } from 'react'
import {
  Input,
  Stack,
  InputGroup,
  InputLeftAddon,
  FormHelperText,
  Button,
  FormControl,
  Text,
  Link
} from '@chakra-ui/core'
import { FaUserAlt, FaLock } from 'react-icons/fa'
import { AiFillMail } from 'react-icons/ai'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import SocialWay from '../SocialWay'
import { signUp } from '../../apis/sign'

const bgColor = 'hsla(0,0%,71%,.1)'
const textColor = '#999'

function SignUp ({ setIndex }) {
  const [error, setError] = useState({})
  const errorArr = useMemo(() => Object.entries(error), [error])

  const formik = useFormik({
    initialValues: {
      username: '',
      email: '',
      password: ''
    },
    validationSchema: Yup.object({
      username: Yup.string()
        .min(2, '用户名长度不能小于2')
        .max(15, '用户名长度不能大于15')
        .required('请输入用户名'),
      email: Yup.string()
        .email('请输入正确邮箱格式')
        .required('请输入邮箱'),
      password: Yup.string()
        .min(6, '密码长度不能小于6')
        .required('请输入密码')
    }),
    onSubmit: async user => {
      try {
        await signUp({ user })
        setIndex(1) // 跳转登录 tab
        formik.resetForm() // 重置注册表单
      } catch (e) {
        setError(e.response.data.errors)
      }
    }
  })

  return (
    <form onSubmit={formik.handleSubmit}>
      <Stack>
        <FormControl isInvalid={!!(formik.touched.username && formik.errors.username)}>
          <InputGroup>
            <InputLeftAddon children={<FaUserAlt />} bgColor={bgColor} />
            <Input name="username" placeholder="请输入用户名" bgColor={bgColor} {...formik.getFieldProps('username')} />
          </InputGroup>
          {
            formik.touched.username && formik.errors.username ? <FormHelperText color="#e53e3e">{formik.errors.username}</FormHelperText> : null
          }
        </FormControl>
        <FormControl isInvalid={!!(formik.touched.email && formik.errors.email)}>
          <InputGroup>
            <InputLeftAddon children={<AiFillMail />} bgColor={bgColor} />
            <Input name="email" placeholder="请输入邮箱" bgColor={bgColor} {...formik.getFieldProps('email')} />
          </InputGroup>
          {
            formik.touched.email && formik.errors.email ? <FormHelperText color="#e53e3e">{formik.errors.email}</FormHelperText> : null
          }
        </FormControl>
        <FormControl mb={3} isInvalid={!!(formik.touched.password && formik.errors.password)}>
          <InputGroup>
            <InputLeftAddon children={<FaLock />} bgColor={bgColor} />
            <Input name="password" type="password" placeholder="请输入密码" bgColor={bgColor} {...formik.getFieldProps('password')} />
          </InputGroup>
          {
            formik.touched.password && formik.errors.password ? <FormHelperText color="#e53e3e">{formik.errors.password}</FormHelperText> : null
          }
        </FormControl>
        <Button type="submit" colorScheme="teal" bgColor="#42c02e" w="100%" borderRadius="full" _hover={{ bgColor: '#3db922' }}>注册</Button>
        {
          errorArr.map((item, i) => <Text color="#e53e3e" key={i + item[0]}>{item.join(' ')}</Text>)
        }
        <Stack pt={2} spacing={1} w="100%" fontSize="sm" color={textColor} align="center">
          <Text>点击 “注册” 即表示您同意并愿意遵守简书</Text>
          <Text>
            <Link color="#3194d0" _hover={{ textDecoration: 'none' }}>用户协议</Link> 和 <Link color="#3194d0" _hover={{ textDecoration: 'none' }}>隐私政策</Link> 。
          </Text>
        </Stack>
        <SocialWay type="注册" />
      </Stack>
    </form>
  )
}

export default SignUp